<template>
	<div>
		<el-dialog :title="title" :visible.sync="dialogVisible" size="full" :close-on-press-escape="false" :close-on-click-modal="false" :before-close="off" :show-close="true" :top="dialog_margin_top">
		<!--工具条-->
			<el-col :span="24" class="toolbar" style="padding-bottom: 0px;margin-top:0px;margin-bottom:5px;">
				<el-form :inline="true">
				  	<el-col :span="16">
				  		<div class="grid-content bg-purple-dark"></div>
						<el-form-item lable="条款代码"  label-width="150px" :span="3">
							<el-input v-model="formData.kindcode" size="small" placeholder="条款代码"></el-input>
						</el-form-item>
						<el-form-item lable="条款名称" label-width="150px" :span="3">
							<el-input v-model="formData.kindcname" size="small" placeholder="条款名称"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button size="small" type="primary" @click="queryData()" icon="search">查询</el-button>
						</el-form-item>
						<el-form-item>
							<el-button size="small" @click="reset()">
								<i class="fa fa-undo"></i>
								重置
							</el-button>
						</el-form-item>
				  	</el-col>
					<!-- <el-col :span="8">
						<el-form-item label="短期费率方式" required>
							  <el-select v-model="formData.shortratetype" placeholder="选择" size="small">
											<el-option v-for="item in shortRateOptions" :key="item.shortratetype" :label="item.shortratetype" :value="item.shortratetype"></el-option>
										</el-select>
				  		</el-form-item>

					</el-col> -->
				</el-form>
			</el-col>

			<el-table :data="tableData" ref="multipleTable" v-loading="loading" element-loading-text="处理中......" border style="width: 100%;" :height="tableHeight" :highlight-current-row="true" @selection-change="rowSelected" @row-click="toggleRow">
			 	<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column prop="kindcode" label="条款代码" width="140"></el-table-column>
				<el-table-column prop="kindcname" label="条款名称" show-overflow-tooltip min-width="150"></el-table-column>
				<el-table-column prop="kindversion" label="条款版本" width="120"></el-table-column>
				<el-table-column prop="startdate" label="生效日期"  width="150" :formatter="dateFormater"></el-table-column>
				<el-table-column prop="enddate" label="失效日期"  width="150" :formatter="dateFormater"></el-table-column>
				<el-table-column prop="validstatus" label="是否有效"  width="120" :formatter="validFormater"></el-table-column>
			</el-table>

			<div class="block" style="float:right">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				      :current-page="formData.currentPage"
				      :page-sizes="[15, 30, 45]"
				      :page-size="formData.pageSize"
				      layout="total, sizes, prev, pager, next, jumper"
				      :total="total">
				</el-pagination>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-row type="flex" :span="24" justify="space-around">
					<el-col :span="18">
						<el-table v-show = "showOwnerRisk" :data="kinds" border style="width: 100%;text-align:left;" :highlight-current-row="true">
							<el-table-column prop="kindcode" label="条款代码" width="120"></el-table-column>
							<el-table-column prop="kindcname" label="条款名称" show-overflow-tooltip min-width="180"></el-table-column>
							<el-table-column prop="ownerriskcode" label="归属险种代码" min-width="120">
							      <template scope="props">
							      <span style="color : red">*</span>
								<input :id="props.row.kindcode" class="ownerriskcode" size="small" @click="openOwnerRiskDialog(props.row)" readonly></input>
							      </template>
							</el-table-column>
						</el-table>
					</el-col>
				</el-row>
				<br>
				<div align="center">
					<el-button @click="off">取 消</el-button>
					<el-button type="warning" @click="confirm" :disabled="isSelectNull">关联</el-button>
				</div>
		  	</span>
		</el-dialog>

		<OwnerRiskCodeSelect v-if="showOwnerRiskSelect"></OwnerRiskCodeSelect>
	</div>

</template>

<script>
import KindAPI from "../../../../js/production/kind/kindAPI"
import RiskAPI from "../../../../js/production/risk/riskAPI"
import dateUtil from "../../../../common/js/dateUtil"
import Utils from"../../../../js/production/utils";
import OwnerRiskCodeSelect from"../../kind/dialog/OwnerRiskCodeSelect";
export default {
  components : {
  	OwnerRiskCodeSelect
  },
  data () {
    	return {
    		formData: {
    		        currentPage: 1,
	                    pageSize: 15,
	                    kindcode: '',
	                    kindcname: '',
	                    validstatus: '1',
	                    kind: {},
	                    risk: {},
	                    selectedRows: [],
	                    shortratetype: '',
	                    ownerriskcode : '',
    		},
    		tableData: [],
    		total: 0,
		riskOptions: [],
		shortRateOptions: [],
		validOptions: [{
			label : '1-有效',
			value: '1'
		},{
			label : '0-无效',
			value: '0'
		}],
		title: '',
		isSortRequest: false,	//是否请求
		showOwnerRiskSelect : false,
		tableHeight: 0,
		dialogVisible: true,
		dialog_margin_top: '1%',
		isSelectNull: true,
		loading : false,
		kinds : [],
		currentRiskCode : '',
		tempId : '',
		tempRiskCode : '',
		showOwnerRisk : false,
	}
  },
  mounted() {
  	this.tableHeight = Utils.getScreenHeight()*0.6;
  	this.formData.risk = this.$parent.selectedRows[0];
  	this.title = '【条款-' + this.formData.risk.riskcode + '-' + this.formData.risk.riskcname + '】可关联条款如下';
  	//判断是否是组合险，是则全部查询，否则按归属险类查询
  	if(this.formData.risk.compositeflag !== '1') {
  		this.formData.ownerriskcode = this.formData.risk.classcode;
  	} else {
  		this.showOwnerRisk = true;
  	}
  	this.queryData();
  	RiskAPI.initShortRate(this);
  	let vm = this;
  	document.onkeydown = function(e) {
  		if(e.keyCode == 13) {
  			vm.queryData();
  		}
  	}
  	setInterval(function(){
  		for(let i = 0;i < vm.kinds.length; i++) {
                    		if(vm.tempId == vm.kinds[i].kindcode) {
                    			$('#' + vm.tempId).val(vm.tempRiskCode);
                    			vm.kinds[i].ownerriskcode = vm.tempRiskCode;
                    		}
                    	}
                    	vm.tempId = '';
            	vm.tempRiskCode = '';
            },500);
  },
   computed: {
  	selectedRows() {
  		return this.formData.selectedRows;
  	}
  },
  watch: {
  	selectedRows(curVal, oldVal) {
  		if (curVal.length < 1) {
  			this.isSelectNull = true;
  		} else {
  			this.isSelectNull = false;
  		}
  		if(this.showOwnerRisk) {
	  		this.kinds = [];
	  		for(let i = 0; i < curVal.length; i++) {
  				this.kinds.push(curVal[i]);
	  		}
	  		$('.ownerriskcode').val('');
  		}
  	},
  },
  methods: {
		queryData() {
			KindAPI.queryByOwnerRisk(this);
		},
		confirm() {
			let vm = this;
			let isLink = true;
			//组合险归属险种不能为空
			if(this.showOwnerRisk) {
				$('.ownerriskcode').each(function() {
					if($(this).val() == '') {
						vm.$message({type: 'error',message: '归属险种代码不能为空！'});
						isLink = false;
						return false;
					}
				});
			}
			if(isLink) {
				RiskAPI.linkKind(vm);
			}
		},
		openOwnerRiskDialog(row) {
			this.formData.kind = row;
  			this.currentRiskCode = row.kindcode;
  			this.showOwnerRiskSelect = true;
  		},
		rowSelected(rows) {
			this.formData.selectedRows = rows;
		},
		toggleRow(row) {
			this.$refs.multipleTable.toggleRowSelection(row);
		},
		handleSizeChange(val) {
			this.formData.pageSize = val;
			this.queryData();
		},
		handleCurrentChange(val) {
			this.formData.currentPage = val;
			this.queryData();
		},
		dateFormater(row,  column) {  
			var  date  =  row[column.property];            
			if  (date  ==  undefined)  {               
				return  "";            
			}  
			return dateUtil.getDateyMd(date);
		},
		validFormater(row,  column) {  
			var  valid =  row[column.property];            
			if  (valid ==  undefined)  {               
				return  "";            
			}  
			if (valid == 1) {
				return "有效";
			}
			if (valid == 0) {
				return "无效";
			}
		},
		reset() {
			this.formData.kindcode = '';
			this.formData.kindcname = '';
			this.formData.currentPage = 1;
			this.queryData();
		},
		off() {
			this.$parent.showLinkKindDialog = false;
		}
  }
}
</script>
